<template>
  <div>
    <la-dialog
      ref="dialogRef"
      :title="dialogTitle"
      :async="true"
      @confirm="handleSubmit"
      @cancel="handleClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        label-width="84px"
        :rules="formRules"
      >
        <el-form-item label="上级部门" prop="avatar">
          <el-tree-select v-model="formData.parent_id" :data="deptOptions"  :render-after-expand="true"  :props="{children: 'children',label: 'name', value:'id',isLeaf: 'leaf'}"  
    check-strictly
    check-on-click-node />
        </el-form-item>
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="负责人" prop="leader">
          <el-input  v-model="formData.leader" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="formData.phone" />
        </el-form-item>
        <el-form-item label="权重" prop="weigh">
          <el-input type="number" v-model="formData.weigh"  />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="formData.remark" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="formData.status" class="ml-4">
            <el-radio label="normal">正常</el-radio>
            <el-radio label="disabled">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </la-dialog>
  </div>
</template>
<script setup>
import api from "@/lnk/admin/api";
import laDialog from "@/lnk/components/la-dialog/index.vue";
import { reactive, ref, computed, nextTick } from "vue";
import feedback from "@/lnk/utils/feedback";

const emit = defineEmits(["success", "close"]);
const dialogRef = ref(null);
const formRef = ref(null);
const mode = ref("add");
const formData = ref({
  name: "",
  weigh:100,
  status:"normal"
});
const formRules = reactive({
  name: [
    { required: true, message: "请输入部门名称", trigger: "blur" },
    { min: 3, message: "用户名最小为3个字符串" },
  ],
});

const deptOptions = ref([]);

const dialogTitle = computed(() => {
  return mode.value == "edit" ? "编辑用户" : "新增用户";
});

const getDeptOptions = async () => {
  const res = await api.dept.list();
  deptOptions.value = res.data;
};

const setFormData = async (row) => {
  const res = await api.dept.read({ id: row.id });
  formData.value = res.data;
};

const open = (type = "add") => {
  mode.value = type;
  dialogRef.value.open();
};
const close = () => {
  formRef.value.resetFields();
  dialogRef.value.close();
  emit("close");
};
const handleSubmit = async () => {
  await formRef.value?.validate();
  let res;
  if (mode.value == "add") {
    res = await api.dept.create(formData.value);
  } else {
    res = await api.dept.update(formData.value);
  }

  if (!res.error) {
    close();
    emit("success");
    feedback.msgSuccess(res.msg);
  } else {
    feedback.msgError(res.msg);
  }
};
const handleClose = async () => {
  close();
};
getDeptOptions();
defineExpose({
  open,
  setFormData,
});
</script>
